<template>
  <div class="approval">
    <a-drawer title="审批人" :destroy-on-close="true" :width="550" :closable="false" :visible="show" @close="onClose" @ok="onOk">
      <!-- container -->
      <a-tabs v-if="options" default-active-key="1">
        <a-tab-pane key="1" tab="审批人设置">
          <a-radio-group v-model="roleType" style="width:100%" @change="onRadio">
            <!-- <a-radio class="radio-appro" value="APPROVER_SELECT">指定成员</a-radio>
            <a-radio class="radio-appro" value="APPROVER_MANAGEMENT">主管</a-radio> -->
            <!-- <a-radio class="radio-appro" value="APPROVER_ROLE">角色</a-radio> -->
            <!-- <a-radio class="radio-appro" value="APPROVER_OPTIONAL">发起人自选</a-radio>
            <a-radio class="radio-appro" value="APPROVER_ORIGINATOR">发起人自己</a-radio> -->
            <a-radio class="radio-appro" value="APPROVER_COMPANY_ROLE">公司管理人员</a-radio>
          </a-radio-group>
          <!-- 指定成员 -->
          <template v-if="roleType == 'APPROVER_SELECT'">
            <a-button type="primary" @click="addEmployees">
              添加/修改成员
            </a-button>
            <span class="sub_tit mg_l10">不能超过20人</span>
            <div v-if="options.props" class="mg_t10">
              <a-tag v-for="(item, index) in options.props.userList" :key="index">{{ item.name }}</a-tag>
            </div>
            <div class="sp mg_t10">
              <div class="mg_b12">多人审批时采用的审批方式</div>
              <a-radio-group v-model="options.activateType" @change="appType">
                <div class="mg_b12">
                  <a-radio :value="0">依次审批</a-radio>
                </div>
                <div class="mg_b12">
                  <a-radio :value="1">会签（须所有审批人同意）</a-radio>
                </div>
                <div class="mg_b12">
                  <a-radio :value="2">或签（一名审批人同意或拒绝即可）</a-radio>
                </div>
              </a-radio-group>
            </div>
          </template>
          <!-- 主管 -->

          <!-- 角色 -->
          <template v-if="roleType == 'APPROVER_ROLE'">
            <a-button type="primary" @click="addRoles">添加角色</a-button>
            <div class="mg_t20 mg_b30">
              <a-tag v-for="(item, index) in options.props.userList" :key="index">{{ item.name }}</a-tag>
            </div>
            <div class="mg_b20 b_bot">
              <div class="mg_b10">多人审批时采用的审批方式</div>
              <a-radio-group v-model="options.activateType">
                <div v-if="false" class="mg_b10">
                  <a-radio :value="0">依次审批</a-radio>
                </div>
                <div class="mg_b10">
                  <a-radio :value="1">会签</a-radio>
                </div>
                <div class="mg_b10">
                  <a-radio :value="2">或签</a-radio>
                </div>
              </a-radio-group>
            </div>
            <div class="b_bot">
              <div class="mg_b10">审批人为空时</div>
              <a-radio-group v-model="options.noneActionerAction">
                <div class="mg_b10">
                  <a-radio :value="0">自动通过</a-radio>
                </div>
                <div class="mg_b10">
                  <a-radio :value="1">自动转交管理员</a-radio>
                </div>
              </a-radio-group>
            </div>
          </template>
          <!-- 发起人自选 -->
          <template v-if="roleType == 'APPROVER_OPTIONAL'">
            <div class="box1">
              <a-select v-model="options.props.isMulti" class="mg_b20" style="width: 120px">
                <a-select-option :value="0">自选一个人</a-select-option>
                <a-select-option :value="1">自选多个人</a-select-option>
              </a-select>
              <div class="mg_b20">选择范围</div>
              <a-select v-model="options.props.range" style="width: 120px">
                <a-select-option value="allUser">全公司用户</a-select-option>
                <a-select-option value="roleUser">公司管理</a-select-option>
                <a-select-option value="limitUser">特定用户</a-select-option>
                <a-select-option value="allRole">角色</a-select-option>
                <a-select-option value="limitRole">特定角色</a-select-option>
              </a-select>
              <template>
                <a-button v-if="options.props.range == 'limitUser'" class="mg_l10" type="primary" @click="addEmployees">添加成员</a-button>
                <a-button v-if="options.props.range == 'roleUser'" class="mg_l10" type="primary" @click="addCompanyRoles"
                  >添加管理</a-button
                >
                <a-button v-if="options.props.range == 'limitRole'" class="mg_l10" type="primary" @click="addRoles">添加角色</a-button>
                <div class="pt12">
                  <a-tag v-for="(item, index) in options.props.userList" :key="index">{{ item.name }}</a-tag>
                </div>
              </template>
            </div>
            <div v-if="options.props.isMulti == 1">
              <div class="mg_b20">多人审批时才用的方式</div>
              <a-radio-group v-model="options.activateType">
                <div v-if="false" class="mg_b10">
                  <a-radio :value="0">依次审批</a-radio>
                </div>
                <div class="mg_b10">
                  <a-radio :value="1">会签（须所有审批人同意）</a-radio>
                </div>
                <a-radio :value="2">或签（一名审批人同意或拒绝即可）</a-radio>
              </a-radio-group>
            </div>
          </template>
          <!-- 发起人自己 -->
          <!-- 公司管理人员 -->
          <template v-if="roleType == 'APPROVER_COMPANY_ROLE'">
            <a-button type="primary" @click="addCompanyRoles">
              添加/修改公司管理人员
            </a-button>
            <span class="sub_tit mg_l10">不能超过20人</span>
            <div v-if="options.props" class="mg_t10">
              <a-tag v-for="(item, index) in options.props.userList" :key="index">{{ item.name }}</a-tag>
            </div>
            <div class="sp mg_t10">
              <div class="mg_b12">多人审批时采用的审批方式</div>
              <a-radio-group v-model="options.activateType" @change="appType">
                <div class="mg_b12">
                  <a-radio :value="0">依次审批</a-radio>
                </div>
                <div class="mg_b12">
                  <a-radio :value="1">会签（须所有审批人同意）</a-radio>
                </div>
                <div class="mg_b12">
                  <a-radio :value="2">或签（一名审批人同意或拒绝即可）</a-radio>
                </div>
              </a-radio-group>
            </div>
          </template>
        </a-tab-pane>
        <a-tab-pane key="2" tab="表单操作设置">
          <div class="form-body">
            <a-row v-for="(item, idx) in options.formSetting" :key="idx" class="header" type="flex">
              <a-col class="header-left">{{ item.flowFormName ? item.flowFormName : item.label }}</a-col>
              <a-col>
                <a-row>
                  <a-radio-group v-model="item.type">
                    <a-radio value="edit">可编辑</a-radio>
                    <a-radio value="read">只读</a-radio>
                    <a-radio value="hide">隐藏</a-radio>
                  </a-radio-group>
                </a-row>
              </a-col>
            </a-row>
          </div>
        </a-tab-pane>
      </a-tabs>
      <!-- 内部弹窗 -->
      <!-- foot -->
      <div class="draw-foot">
        <a-button style="marginRight: 8px" @click="onClose">取消</a-button>
        <a-button type="primary" @click="onOk">确认</a-button>
      </div>
    </a-drawer>
    <employee-select :show.sync="employeeVisible" :default-selected-keys="defaultEmployeeKeys" :title="title" @change="onEmployeeChange" />

    <role-select :show.sync="roleVisible" :default-selected-keys="defaultRoleKeys" @change="onRoleChange" />
    <company-role-select
      :show.sync="addCompanyRole"
      :title="title"
      :default-selected-keys="defaultCompanyRoleKeys"
      @change="onCompanyRoleChange"
    />
  </div>
</template>

<script>
import CompanyRoleSelect from "@/components/EmployeeSelect2/employeeSelect5";

import EmployeeSelect from "@/components/RoleSelect/employee-select";
import RoleSelect from "@/components/RoleSelect";

import { isJson } from "@/utils/index";
export default {
  name: "ApprovalDrawer",
  components: {
    EmployeeSelect,
    RoleSelect,
    CompanyRoleSelect
  },
  props: {
    approOptions: {
      type: Object,
      default: () => {}
    },
    show: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      title: "",
      level: 1, // 主管等级
      autoUp: true, // 找不到主管时，由上级主管代审批
      options: null,
      employeeVisible: false,
      addCompanyRole: false,
      roleVisible: false,
      defaultEmployeeKeys: [],
      defaultRoleKeys: [],
      defaultCompanyRoleKeys: [],
      choseEmployees: [], // 选中的成员
      choseRoles: [],
      companyRole: [],
      roleType: null, // 指定成员
      copyOptions: {}
    };
  },
  computed: {
    // 主管集合
    MANAGEMENT() {
      let i = 1;
      const box = [];
      while (i <= 20) {
        box.push({
          name: i === 1 ? "直接主管" : `第${i}级主管`,
          level: i
        });
        i++;
      }
      return box;
    }
  },
  watch: {
    show(val) {
      if (val) {
        this.copyOptions = JSON.parse(JSON.stringify(this.approOptions));
        this.initOptions(this.approOptions);
      }
    }
  },
  created() {
    this.initOptions(this.approOptions);
  },

  methods: {
    changeCustom(e) {
      this.customShow = e.show;
    },
    initKeys() {
      this.defaultEmployeeKeys = [];
      this.defaultRoleKeys = [];
      this.defaultCompanyRoleKeys = [];
    },

    initOptions(val) {
      this.options = Object.assign({}, val, {
        props: isJson(val.props) ? JSON.parse(val.props) : val.props
      });
      this.roleType = "APPROVER_COMPANY_ROLE";
      if (this.options.props && !!this.options.props.values) {
        this.roleType = this.options.props.type;
        switch (this.options.props.type) {
          case "APPROVER_SELECT":
            //  this.defaultEmployeeKeys = this.options.props.values.split(",");
            this.defaultEmployeeKeys = this.options.props.userList;
            break;
          case "APPROVER_MANAGEMENT":
            break;
          case "APPROVER_ROLE":
            //  this.defaultRoleKeys = this.options.props.values.split(",");
            this.defaultRoleKeys = this.options.props.userList;
            break;
          case "APPROVER_COMPANY_ROLE":
            // this.defaultCompanyRoleKeys = this.options.props.values.split(",");
            this.defaultCompanyRoleKeys = this.options.props.userList;

            break;
        }
      }
    },
    onEmployeeChange(data) {
      this.initKeys();
      this.choseEmployees = data;
      // this.defaultEmployeeKeys = data.map(i => i.id);
      this.defaultEmployeeKeys = data;
      this.options.props.userList = this.choseEmployees;
    },
    onRoleChange(data) {
      this.initKeys();
      this.choseRoles = data;
      //  this.defaultRoleKeys = data.map(i => i.id);
      this.defaultRoleKeys = data;
      this.options.props.userList = this.choseRoles;
    },
    onCompanyRoleChange(data) {
      this.initKeys();
      this.companyRole = data;
      // this.defaultCompanyRoleKeys = data.map(i => i.id);
      this.defaultCompanyRoleKeys = data;
      this.options.props.userList = this.companyRole;
    },
    // 添加角色
    addRoles() {
      this.title = "角色";
      this.roleVisible = true;
    },
    // 添加成员
    addEmployees() {
      this.title = "成员";
      this.employeeVisible = true;
    },
    // 添加公司管理人员
    addCompanyRoles() {
      this.title = "公司管理人员";
      this.addCompanyRole = true;
    },
    /* radio 选择 */
    onRadio(val) {
      this.options.props.userList = [];
      this.options.props.type = val.target.value;
      if (val.target.value === "APPROVER_ORIGINATOR") {
        this.options.props.userList = [
          {
            name: "发起人自己",
            vlaues: 0
          }
        ];
      }
    },

    // 审批方式
    appType(e) {
      this.options.activateType = e.target.value;
    },
    // 审批人为空时
    appNone(e) {
      this.options.noneActionerAction = e.target.value;
    },
    /* 确认 */
    onOk() {
      this.options.props.type = this.roleType;
      if (Boolean(this.options.props.userList)) {
        this.options.props.name = this.options.props.userList.map(val => val.name).toString();
        this.options.props.values = this.options.props.userList.map(val => val.id).toString();
      }

      this.$emit("change", this.options);
      this.$emit("update:show", false);
    },
    /* 取消 */
    onClose(e) {
      this.$emit("update:show", false);
      this.$emit("change", this.copyOptions);
    }
  }
};
</script>
<style lang="scss" scoped>
@import "../../styles/approvalDrawer.scss";
</style>
